<template>
    <ul class="tree-menu">
        <li v-for="(item, index) in data">
            <div class="chapter_ceng" v-if="item.Childs && item.Childs.length && ceng" @click="toggle(item, index)" :style="{paddingLeft:ceng *18 +'px'}" >
                <i :class="['icon', item.Childs && item.Childs.length ? item.isfold : '' ]"></i>
                <i>{{ item.ChapterName }}</i>
                <img v-if="item.isLock || item.PermissionID===2" src="../../images/suo.png" alt="">
            </div>
            <div class="chapter_last" v-else :style="{paddingLeft:ceng *18 +'px'}">
                <div class="lastName">
                    <span v-bind:class="['pct','pct'+item.pctTag]">
                        <i>{{item.ChapterName}}</i>
                        <img v-if="item.isLock || item.PermissionID===2" src="../../images/suo.png" alt="">
                    </span>
                    <br/>
                    <span class="testCount">
                            共{{item.TestNum}}题(已答{{item.DoneNum}}题   正确率{{item.accuracy}}%)
                    </span>
                </div>
                <div class="answer_div" >
                    <div class="benzhang">重做本章</div>
                    <div class="biji">笔记({{item.noteNum}})</div>
                    <div class="shoucang">收藏({{item.favNum}})</div>
                    <div class="cuoti">错题({{item.errorNum}})</div>
                </div>
            </div>
            <tree-menu v-show="scope[index]" :data="item.Childs" :userType="userType" :ceng="ceng+1"></tree-menu>
        </li>
    </ul>
</template>

<script>
    export default {
        name: "treeMenu",
        props:['data','ceng','userType'],
        // props: {
        //     datas: ,
        //     loading: Boolean
        // },
        data () {
            return {
                loading:true,
                scope: {}
            }
        },
        mounted () {
            if(this.data){
                this.data.forEach((item, index) => {
                    if (item.Childs && item.Childs.length) {
                        item.isfold = 'folder';
                    }
                });
            }

        },
        methods: {
            toggle (item, index) {
                console.log(item)
                if(!this.userType && item.PermissionID===2 || item.isLock){
                    //弹窗提示购买使用
                    return
                }
                this.$set(this.scope, index, !this.scope[index]);
                item.isfold = this.scope[index] ? 'folder-open' : '';
            }
        }
    }
</script>

<style scoped lang="less">
    @main_color:#5bb8ff;
    @white:#fff;
    @green_color:#66cc80;
    @yellow_color:#ffb73e;
    @red_color:#fc7a7e;
    @black:#000;
    @color_6:#666;
    @color_3:#333;
    @color_d:#ddd;
    @color_df:#dfdfdf;
    @color_9:#999;
    @color_f3:#f3f3f3;
    .tree-menu {
        list-style: none;
        li{
            .chapter_ceng{
                border-bottom: 1px solid @color_df;
                line-height: 49px;
            }
            i{
                font-style: normal;
            }
        }
    }

    .icon {
        display: inline-block;
        width: 12px;
        height: 12px;
        background: url(../../images/shouqi.png) no-repeat 0px center;
    }
    /*.icon.folder {*/
        /*background: url(../../images/shouqi.png) no-repeat 0px center;*/
    /*}*/
    .icon.folder-open {
        background: url(../../images/zhankai.png) no-repeat 0px center;
    }
    .chapter_last{
        height: 100%;
        width: auto;
        overflow-x:auto;
        cursor: pointer;
        position: relative;
        clear: both;
        height: 67px;
        background: @color_f3;
        border-bottom: 1px solid @color_df;
        .lastName{
            float: left;
            padding: 10px 10px 15px 10px;
            cursor: pointer;
            width: 50%;
            color: @color_3;

            i{
                float: left;
            }
            img{
                float: left;
                margin-top: 2px;
            }
            .pct{
                float: left;
                background: url(../../images/cake00.png) 0px center no-repeat;
                background-size: 15px;
                padding-left: 30px;
                height: 21px;
                line-height: 21px;
                font-size: 16px;
                cursor: pointer;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 90%;
                overflow: hidden;
            }
            .pct0{
                background: url(../../images/cake00.png) 0px center no-repeat;
            }
            .pct1{
                background: url(../../images/cake24.png) 0px center no-repeat;
            }
            .pct2{
                background: url(../../images/cake25.png) 0px center no-repeat;
            }
            .pct3{
                background: url(../../images/cake37.png) 0px center no-repeat;
            }
            .pct4{
                background: url(../../images/cake50.png) 0px center no-repeat;
            }
            .pct5{
                background: url(../../images/cake62.png) 0px center no-repeat;
            }
            .pct6{
                background: url(../../images/cake75.png) 0px center no-repeat;
            }
            .pct7{
                background: url(../../images/cake87.png) 0px center no-repeat;
            }
            .pct8{
                background: url(../../images/cake100.png) 0px center no-repeat;
            }
            .testCount{
                font-size: 14px;
                color: @color_9;
                padding-top: 2px;
                padding-left: 30px;
                cursor: pointer;
                clear: both;
                margin-left: 1px;
                float: left;
            }

        }
        .answer_div{
            float: right;
            font-size: 14px;
            border-bottom: 0px solid #ccc !important;
            margin-top: 20px;
            margin-right: 0px;
            max-width: 320px;
            div{
                float: right;
                width: 70px;
                text-align: center;
                padding-right: 8px;
                padding-top: 3px;
                padding-bottom: 5px;
                cursor: pointer;
                border: 1px solid @color_df;
            }
            .cuoti{
                color: @main_color;
                border-radius: 5px 0px 0px 5px;
            }
            .shoucang{
                color: @green_color;
            }
            .biji{
                color: @yellow_color;
            }
            .benzhang{
                color: @red_color;
                border-radius: 0px 5px 5px 0px;
            }
        }
    }

</style>
